<template>
	<view class="investment-container page-container">
		<!-- 页面头部 -->
		<view class="page-header">
			<view class="header-content">
				<text class="page-subtitle">携手共创茶业新未来</text>
			</view>
		</view>

		<!-- 加盟优势 -->
		<view class="advantages-section">
			<view class="section-title">
				<u-icon name="star-fill" size="20" color="#52a58a"></u-icon>
				<text class="title-text">加盟优势</text>
			</view>
			<view class="advantages-grid">
				<view class="advantage-item">
					<u-icon name="shop" size="24" color="#52a58a"></u-icon>
					<text class="advantage-title">门店支持</text>
					<text class="advantage-desc">全方位开店指导</text>
				</view>
				<view class="advantage-item">
					<u-icon name="trending-up" size="24" color="#52a58a"></u-icon>
					<text class="advantage-title">品牌优势</text>
					<text class="advantage-desc">知名茶叶品牌</text>
				</view>
				<view class="advantage-item">
					<u-icon name="heart" size="24" color="#52a58a"></u-icon>
					<text class="advantage-title">合作共赢</text>
					<text class="advantage-desc">共享发展机遇</text>
				</view>
				<view class="advantage-item">
					<u-icon name="medal" size="24" color="#52a58a"></u-icon>
					<text class="advantage-title">品质保障</text>
					<text class="advantage-desc">严格质量管控</text>
				</view>
			</view>
		</view>

		<!-- 加盟申请表单 -->
		<view class="form-section">
			<view class="section-title">
				<u-icon name="edit-pen" size="20" color="#52a58a"></u-icon>
				<text class="title-text">加盟申请</text>
			</view>

			<view class="form-item">
				<text class="form-label">姓名 *</text>
				<input class="form-input" placeholder="请输入您的姓名" v-model="formData.contact_name" maxlength="20" />
				<text v-if="formErrors.contact_name" class="error-text">{{ formErrors.contact_name }}</text>
			</view>

			<view class="form-item">
				<text class="form-label">手机号 *</text>
				<input class="form-input" placeholder="请输入您的手机号" v-model="formData.contact_tel" type="number"
					maxlength="11" />
				<text v-if="formErrors.contact_tel" class="error-text">{{ formErrors.contact_tel }}</text>
			</view>

			<view class="form-item">
				<text class="form-label">意向城市 *</text>
				<input class="form-input" placeholder="请输入意向开店城市" v-model="formData.city" maxlength="30" />
				<text v-if="formErrors.city" class="error-text">{{ formErrors.city }}</text>
			</view>

			<view class="form-item">
				<text class="form-label">投资预算</text>
				<view class="form-select" @click="showInvestmentPicker = true">
					<text class="select-text" :class="{ placeholder: !formData.investment }">
						{{ formData.investment || '请选择投资预算' }}
					</text>
					<u-icon name="arrow-right" size="16" color="#999"></u-icon>
				</view>
			</view>

			<view class="form-item">
				<text class="form-label">经营经验</text>
				<view class="form-select" @click="showExperiencePicker = true">
					<text class="select-text" :class="{ placeholder: !formData.experience }">
						{{ formData.experience || '请选择经营经验' }}
					</text>
					<u-icon name="arrow-right" size="16" color="#999"></u-icon>
				</view>
			</view>

			<view class="form-item">
				<text class="form-label">门店类型</text>
				<view class="form-select" @click="showStoreTypePicker = true">
					<text class="select-text" :class="{ placeholder: !formData.storeType }">
						{{ formData.storeType || '请选择门店类型' }}
					</text>
					<u-icon name="arrow-right" size="16" color="#999"></u-icon>
				</view>
			</view>

			<view class="form-item">
				<text class="form-label">备注信息</text>
				<textarea class="form-textarea" placeholder="有无门店，意向城市等详细信息" v-model="formData.contact_text"
					maxlength="200"></textarea>
			</view>
		</view>

		<!-- 联系方式 -->
		<view class="contact-section">
			<view class="contact-item" @click="callPhone('0774-2811323')">
				<u-icon name="phone" size="18" color="#52a58a"></u-icon>
				<view class="contact-info">
					<text class="contact-label">加盟热线</text>
					<text class="contact-value">0774-2811323</text>
				</view>
			</view>
		</view>

		<!-- 底部提交按钮 -->
		<view class="bottom-actions">
			<button class="submit-btn" @click="submitForm">
				<text class="btn-text">立即加盟</text>
			</button>
		</view>

		<!-- 投资预算选择器 -->
		<u-picker :show="showInvestmentPicker" :columns="investmentPickerColumns" @confirm="confirmInvestment"
			@cancel="showInvestmentPicker = false"></u-picker>

		<!-- 经营经验选择器 -->
		<u-picker :show="showExperiencePicker" :columns="experiencePickerColumns" @confirm="confirmExperience"
			@cancel="showExperiencePicker = false"></u-picker>

		<!-- 门店类型选择器 -->
		<u-picker :show="showStoreTypePicker" :columns="storeTypePickerColumns" @confirm="confirmStoreType"
			@cancel="showStoreTypePicker = false"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					form_type: 2, // 类型：1-茶叶定制 2-招商加盟 3-供应链合作 4-其他
					contact_name: '',
					contact_tel: '',
					city: '',
					investment: '',
					experience: '',
					storeType: '',
					contact_text: '',
					customize_num: 0,
				},
				// 表单验证错误
				formErrors: {},
				// 选择器显示状态
				showInvestmentPicker: false,
				showExperiencePicker: false,
				showStoreTypePicker: false,
				// 投资金额选项
				investmentOptions: [
					'10-30万',
					'30-50万',
					'50-100万',
					'100-200万',
					'200万以上'
				],
				// 经验选项
				experienceOptions: [
					'无经验',
					'1-3年',
					'3-5年',
					'5年以上'
				],
				// 门店类型选项
				storeTypeOptions: [
					'街边店',
					'商场店',
					'社区店',
					'写字楼店',
					'其他'
				]
			}
		},
		computed: {
			// 投资预算选择器数据
			investmentPickerColumns() {
				return [this.investmentOptions]
			},
			// 经营经验选择器数据
			experiencePickerColumns() {
				return [this.experienceOptions]
			},
			// 门店类型选择器数据
			storeTypePickerColumns() {
				return [this.storeTypeOptions]
			}
		},
		methods: {
			// 确认投资预算选择
			confirmInvestment(value) {
				this.formData.investment = value[0]
				this.showInvestmentPicker = false
			},

			// 确认经营经验选择
			confirmExperience(value) {
				this.formData.experience = value[0]
				this.showExperiencePicker = false
			},

			// 确认门店类型选择
			confirmStoreType(value) {
				this.formData.storeType = value[0]
				this.showStoreTypePicker = false
			},

			// 拨打电话
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					fail: () => {
						uni.showToast({
							title: '拨号失败',
							icon: 'none'
						})
					}
				})
			},

			// 表单验证
			validateForm() {
				this.formErrors = {}
				let isValid = true

				// 验证姓名
				if (!this.formData.contact_name.trim()) {
					this.formErrors.contact_name = '请输入您的姓名'
					isValid = false
				}

				// 验证手机号
				if (!this.formData.contact_tel.trim()) {
					this.formErrors.contact_tel = '请输入手机号'
					isValid = false
				} else {
					const phoneReg = /^1[3-9]\d{9}$/
					if (!phoneReg.test(this.formData.contact_tel)) {
						this.formErrors.contact_tel = '请输入正确的手机号码'
						isValid = false
					}
				}

				// 验证意向城市
				if (!this.formData.city.trim()) {
					this.formErrors.city = '请输入意向开店城市'
					isValid = false
				}

				return isValid
			},

			// 提交表单
			submitForm() {
				if (!this.validateForm()) {
					uni.showToast({
						title: '请检查表单信息',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '提交中...'
				})
				this.$api.good.AddContact(this.formData).then(res => {
					// 清空表单
					this.formData = {
						form_type: 2, // 类型：1-茶叶定制 2-招商加盟 3-供应链合作 4-其他
						contact_name: '',
						contact_tel: '',
						city: '',
						investment: '',
						experience: '',
						storeType: '',
						contact_text: '',
						customize_num: 0,
					}
					this.formErrors = {}
					uni.showToast({
						title: res.msg,
						icon: 'success',
						duration: 3000
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.investment-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
	}

	.page-header {
		background: linear-gradient(135deg, #52a58a 0%, #459a7e 100%);
		padding: 60rpx 30rpx 40rpx;
		text-align: center;
		color: white;
	}

	.header-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.page-subtitle {
		font-size: 26rpx;
		opacity: 0.9;
	}

	.advantages-section,
	.form-section,
	.contact-section {
		background-color: #ffffff;
		margin: 20rpx;
		border-radius: 12rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.section-title {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 30rpx;
	}

	.title-text {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
	}

	.advantages-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24rpx;
	}

	.advantage-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12rpx;
		padding: 30rpx 20rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
		text-align: center;
	}

	.advantage-title {
		font-size: 26rpx;
		font-weight: 500;
		color: #333;
	}

	.advantage-desc {
		font-size: 22rpx;
		color: #666;
	}

	.form-item {
		margin-bottom: 40rpx;
	}

	.form-item:last-child {
		margin-bottom: 0;
	}

	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
		font-weight: 500;
	}

	.form-input {
		width: 100%;
		height: 88rpx;
		padding: 24rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		font-size: 28rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		line-height: 1.4;
	}

	.form-input:focus {
		border-color: #52a58a;
	}

	.form-select {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 88rpx;
		padding: 24rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		background-color: #ffffff;
		box-sizing: border-box;
	}

	.select-text {
		font-size: 28rpx;
		color: #333;
	}

	.select-text.placeholder {
		color: #999;
	}

	.form-textarea {
		width: 100%;
		min-height: 160rpx;
		padding: 24rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		font-size: 28rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		line-height: 1.4;
	}

	.form-textarea:focus {
		border-color: #52a58a;
	}

	.error-text {
		font-size: 24rpx;
		color: #ff4757;
		margin-top: 12rpx;
		display: block;
	}

	.contact-item {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		gap: 20rpx;
	}

	.contact-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.contact-label {
		font-size: 28rpx;
		color: #333;
	}

	.contact-value {
		font-size: 32rpx;
		color: #52a58a;
		font-weight: 600;
	}

	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 1rpx solid #eee;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		display: flex;
		gap: 16rpx;
		z-index: 1000;
	}

	.submit-btn {
		flex: 2;
		background-color: #52a58a;
		color: #ffffff;
		border: none;
		border-radius: 12rpx;
		padding: 24rpx;
		font-size: 32rpx;
		font-weight: 500;
	}

	.call-btn {
		flex: 1;
		background-color: transparent;
		color: #52a58a;
		border: 2rpx solid #52a58a;
		border-radius: 12rpx;
		padding: 24rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
	}

	.btn-text,
	.call-text {
		color: inherit;
	}
</style>